<template>
  <a-form
      ref="formRef"
      :model="formData"
      class="form"
      :label-col-props="{ span: 8 }"
      :wrapper-col-props="{ span: 11 }"
  >
    <!--    实验阶段限时-->
    <a-form-item
        field="limitTime"
        :label="$t('stepForm.form.label.limitTime')"
        :rules="[
        {
          required: true,
          message: $t('stepForm.form.error.limitTime.required'),
        },
        {
          match: /^\d{1,9}$/,
          message: $t('stepForm.form.error'),
        },
      ]"
    >
      <a-input
        v-model="formData.limitTime"
        :placeholder="$t('stepForm.form.error.limitTime.required')"
        allow-clear >
        <template #append>
          分钟
        </template>
      </a-input>
    </a-form-item>
    <!--实验开始等待时间-->
    <a-form-item
        field="channelTime"
        :label="$t('stepForm.form.label.channelTime')"
        :rules="[
        {
          required: true,
          message: $t('stepForm.form.error.channelTime.required'),
        },
         {
          match: /^\d{1,9}$/,
          message: $t('stepForm.form.error'),
        },
      ]"
    >
      <a-input
        v-model="formData.channelTime"
        :placeholder="$t('stepForm.placeholder.channelTime')"
        allow-clear >
        <template #append>
          秒
        </template>
      </a-input>
    </a-form-item>

    <!--起止日期-->
    <a-form-item
        field="promotionTime"
        :label="$t('stepForm.form.label.promotionTime')"
        :rules="[
        {
          required: true,
          message: $t('stepForm.form.error.promotionTime.required'),
        },
      ]"
    >
      <a-range-picker v-model="formData.promotionTime" />
    </a-form-item>
    <!--资产配置页面时间-->
    <a-form-item
        field="promoteSetting"
        :label="$t('stepForm.form.label.promoteSetting')"
        :rules="[
        {
          required: true,
          message: $t('stepForm.form.error.promoteSetting.required'),
        },
        {
         match: /^\d{1,9}$/,
          message: $t('stepForm.form.error'),
        },
      ]"
        row-class="keep-margin"
    >
      <a-input
        v-model="formData.promoteSetting"
        :placeholder="$t('stepForm.placeholder.promoteSetting')">
        <template #append>
          秒
        </template>
      </a-input>
    </a-form-item>
<!--每阶段收益-->
    <a-form-item
        field="inTime"
        :label="$t('stepForm.form.inTime')"
        :rules="[
        {
          required: true,
          message: $t('stepForm.form.inTime.required'),
        },
        {
           match: /^\d{1,9}$/,
          message: $t('stepForm.form.error'),
        },
      ]"
        row-class="keep-margin"
    >
      <a-input
        v-model="formData.inTime"
        :placeholder="$t('stepForm.form.inTime.required')">

      <template #append>
        秒
      </template>
      </a-input>
    </a-form-item>

    <a-form-item
        field="waitTime"
        :label="$t('stepForm.form.waitTime')"
        :rules="[
        {
          required: true,
          message: $t('stepForm.form.waitTime.required'),
        },
        {
           match: /^\d{1,9}$/,
          message: $t('stepForm.form.error'),
        },
      ]"
        row-class="keep-margin"
    >
      <a-input
        v-model="formData.waitTime"
        :placeholder="$t('stepForm.form.waitTime.required')">
        <template #append>
          秒
        </template>
      </a-input>
    </a-form-item>

    <a-form-item
        field="count"
        :label="$t('stepForm.form.count.name')"
        :rules="[
        {
          required: true,
          message: $t('stepForm.form.count.placeholder'),
        },
        {
           match: /^\d{1,9}$/,
          message: $t('stepForm.form.error'),
        },
      ]"
        row-class="keep-margin"
    >
      <a-input
          v-model="formData.count"
          :placeholder="$t('stepForm.form.count.placeholder')">
        <template #append>
          桌
        </template>
      </a-input>
    </a-form-item>

    <a-form-item>
      <a-button type="primary" @click="onNextClick">
        {{ $t('stepForm.button.next') }}
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { FormInstance } from '@arco-design/web-vue/es/form';
import { BaseInfoModel } from '@/api/form';

const emits = defineEmits(['changeStep']);
const formRef = ref<FormInstance>();
const formData = ref<BaseInfoModel>({

  limitTime: '',
  channelTime: '',
  promotionTime: [],
  promoteSetting:'',
  inTime:'',
  waitTime:'',
  count:'',
});

const onNextClick = async () => {
  const res = await formRef.value?.validate();
  if (!res) {
    emits('changeStep', 'forward', { ...formData.value });
  }
};
</script>

<style scoped lang="less">
.container {
  padding: 20px;
  .keep-margin {
    margin-bottom: 20px;
  }
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 0;
  background-color: var(--color-bg-2);
}

.steps {
  margin-bottom: 36px;
}

.form {
  width: 500px;
}

.form-content {
  padding: 8px 50px 0 30px;
}
</style>
